<template>
<div class="app-container">
  <el-form :model="form" >
    <el-row>
      <div class="demo-input-suffix">
        服务类型：
        <el-select v-model="form.type" placeholder="发布时间">
          <el-option label="拼团开始时间" value="1"></el-option>
          <el-option label="拼团结束时间" value="2"></el-option>
          <el-option label="发布时间" value="3"></el-option>
        </el-select>
        <el-date-picker
          v-model="form.date1"
          type="datetime"
          placeholder="选择开始时间">
        </el-date-picker>
        <el-date-picker
          v-model="form.date2"
          type="datetime"
          placeholder="选择结束时间">
        </el-date-picker>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button class="collageAdd" type="primary" @click="collageAdd">新增拼团</el-button>
      </div>
    </el-row>
    <el-row>
      <div class="demo-input-suffix">
        服务标题：
        <el-input v-model="form.title" placeholder="清输入"></el-input>
        服务分类：
        <el-select v-model="form.type1" @change="classTwo" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="item in optionsOneId"
            :key="item.eq"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="form.type2" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="item in optionsTwoId"
            :key="item.eq"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        拼团状态：
        <el-select v-model="form.state" placeholder="全部">
          <el-option label="全部" value=""></el-option>
          <el-option label="待拼团" value="1"></el-option>
          <el-option label="正在拼团" value="2"></el-option>
          <el-option label="拼团失败" value="3"></el-option>
          <el-option label="拼团成功" value="4"></el-option>
          <el-option label="已下架" value="5"></el-option>
        </el-select>
      </div>
    </el-row>
  </el-form>
  <el-table :data="tableData" id="out-table">
    <el-table-column type="selection" align="center"></el-table-column>
    <el-table-column type="index" align="center"></el-table-column>
    <el-table-column
      v-for="item in tableList"
      :key="item._id"
      :prop="item.value"
      :label="item.name"
      align="center">
    </el-table-column>
    <el-table-column label="操作" align="left">
      <template slot-scope="scope">
        <div style="display:flex">
          <el-button
            size="mini"
            type="primary"
            @click="gotoDetail(scope.$index)">详情</el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="scope.row.state == '待成团'"
            @click="upSend(scope.$index)">下架</el-button>
          <el-button
            size="mini"
            type="warning"
            v-if="scope.row.state == '已取消'||scope.row.state == '拼团失败'"
            @click="reSend(scope.$index)">重新发布</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals">
    </el-pagination>
    <el-button class="upload" @click="exportExcel">导出excal
    </el-button>
  </div>
</div>

</template>

<script>
import request from '@/utils/request'
import { formatDate,toDate,toUnix } from '@/utils/index'
import { Excel,validateCollage } from '@/utils/validate'
export function getList(mes) {
  return request({
    url: '/v1/admin/service',
    method: 'post',
    data: mes
  })
}
export function down(mes, url) {
  return request({
    url: url,
    method: 'post',
    data: mes
  })
}
export default {
  created: function() {
    let obj = {
      page: 1,
      size: 10,
    }
    this.getMes(obj)
    const n = {
      page: 1,
      size: 9999,
      classify_type: 1
    }
    down(n, '/v1/classify').then(res => {
      if (res.code === 200) {
        if (res.data.list.length) {
          res.data.list.filter(item => {
            const val = {
              value: item._id,
              label: item.classify_name,
            }
            this.optionsOneId.push(val)
          })
        }
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
    }).catch(error => {
      this.$message({
        message: error,
        type: 'error'
      });
    })
  },
  methods: {
    getMes(item) {
      getList(item).then(res => {
        if (res.code === 200) {
          console.log(item);
          if (res.data.list.length) {
            this.setTableData = res.data.list
            console.log(res);
            this.totals = res.data.totalNumber
            res.data.list.map(item => {
              const val = {
                _id: item._id,
                one: item.service_branch_id ? item.service_branch_id.classify_name : '无',
                two: item.service_classify_id ? item.service_classify_id.classify_name : '无',
                title: item.service_name,
                money: item.service_money,
                btime: item.ping_begin_time ? formatDate(new Date(item.ping_begin_time * 1000), 'yyyy-MM-dd hh:mm') : '无',
                etime: item.ping_end_time ? formatDate(new Date(item.ping_end_time * 1000), 'yyyy-MM-dd hh:mm') : '无',
                area: item.service_area_name,
                address: item.service_address_name,
                radius: item.service_address_radius,
                time: item.update_time ? formatDate(new Date(item.update_time * 1000), 'yyyy-MM-dd hh:mm') : '',
                state: validateCollage(item.service_status),
              }
              this.tableData.push(val)
            })
          }
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    classTwo() {
      const n = {
        page: 1,
        size: 9999,
        classify_type: 2,
        classify_branch_id: this.form.type1
      }
      this.optionsTwoId = [];
      down(n, '/v1/classify').then(res => {
        if (res.code === 200) {
          console.log(res);
          if (res.data.list.length) {
            res.data.list.filter(item => {
              const val = {
                value: item._id,
                label: item.classify_name,
              }
              this.optionsTwoId.push(val)
            })
          }
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleSizeChange(val) {
      this.tableData = []
      let obj = {
        size: val,
        page: 1
      }
      this.getMes(obj)
      this.size = val
    },
    handleCurrentChange(page) {
      this.tableData = []
      let obj = {
        page: page,
        size: this.size
      }
      this.getMes(obj)
    },
    onSubmit() {
      this.tableData = []
      const item = {
        page: 1,
        size: this.size,
        search_type: this.form.type,
        search_begin_time: this.form.date1 ? toUnix(toDate(this.form.date1)) : '',
        search_end_time: this.form.date2 ? toUnix(toDate(this.form.date2)) : '',
        service_name: this.form.title,
        classify_branch_id: this.form.type1,
        classify_chlid_id: this.form.type2,
        service_status: this.form.state
      }
      this.getMes(item)
    },
    exportExcel() {
      Excel('#out-table')
    },
    collageAdd() {
      delete localStorage.getItem('CollageMes')
      this.$router.push('CollageAdd')
    },
    gotoDetail(index) {
      localStorage.setItem('CollageMes', JSON.stringify(this.setTableData[index]))
      this.$router.push({
        path: 'CollageMes'
      })
    },
    upSend(i) {
      let item = {
        service_id: this.tableData[i]._id,
        service_status: 2
      }
      // console.log(item);
      down(item, '/v1/admin/service/updateStatus').then(res => {
        if (res.code === 200) {
          this.$message({
            message: this.tableData[i]._id + '下架成功！',
            type: 'success'
          });
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    reSend(index) {
      localStorage.setItem('reSend', JSON.stringify(this.setTableData[index]))
      // console.log(this.setTableData[index])
      this.$router.push({
        path: 'CollageAdd'
      })
    }
  },
  filters: {
    isStart: function(value) {
      if (!value || value == '') return '订单详情'
      return value
    }
  },
  data() {
    return {
      page: {
        page: 1,
        size: 10,
        action: '',
        classify_branch_id: '',
        classify_chlid_id: '',
        address_city: '',
        order_by: '',
      },
      form: {
        type: '',
        date1: '',
        date2: '',
        title: '',
        type1: '',
        type2: '',
        state: ''
      },
      tableList: [
        { name: '拼团ID', value: '_id' },
        { name: '服务一级分类', value: 'one' },
        { name: '服务二级分类', value: 'two' },
        { name: '服务标题', value: 'title' },
        { name: '拼团价格', value: 'money' },
        { name: '拼团开始时间', value: 'btime' },
        { name: '拼团结束时间', value: 'etime' },
        { name: '服务区域', value: 'area' },
        { name: '服务中心位置', value: 'address' },
        { name: '服务范围半径', value: 'radius' },
        { name: '状态', value: 'state' },
        { name: '发布时间', value: 'time' },
      ],
      optionsOneId: [],
      optionsTwoId: [],
      tableData: [],
      currentPage: 1,
      totals: 300,
      size: 10
    }
  }
}
</script>
<style scoped>
  .el-col{
    margin: 5px;
  }
  .el-row{
    margin: 10px 0;
  }
  .demo-input-suffix div{
    margin-right: 10px;
  }
  .el-table{
    margin-bottom: 10px;
  }
  .upload{
    float: right;
  }
  .el-input{
    width: 200px;
  }
  .collageAdd{
    float: right;
  }
  .block{
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .el-select{
    width: 160px;
  }
</style>
